<template>
  <div id="footBase">
    <div class="footBot">
      <div class="footBotTop">
        <div class="fotBotTdiv">
          <!-- <div class="fontlogo"></div> -->
          <!-- <iframe 
            src="../../static/syimg/logo2_画板 1.svg"
            style="display: block;width: 310px;height: 236px;border: none;position: relative;top: -22px;left: -8px;"
          ></iframe> -->
          <img
            style="position: relative; top: 43px; left: -8px"
            src="https://uniappfile.bosihw.cn/Res/BosihuiwenRes/bianjiimg/logomin.png"
            alt=""
          />
          <ul>
            <li v-for="(item, index) in footList" :key="index">
              <p>
                <router-link
                  :to="{ name: 'footdetail', query: { id: item.Id } }"
                  >{{ item.Name }}</router-link
                >
              </p>
            </li>
            <li>
              <p>
                <router-link :to="{ name: 'footdetail', query: { id: 5 } }"
                  >关于我们</router-link
                >
              </p>
            </li>
          </ul>
          <p class="fotBotTdiv_rexian">服务热线：400-921-9838</p>
          <p class="fotBotTdiv_rexian2">服务邮箱：bosihuiwen@163.com</p>
          <p class="fotBotTdiv_rexian3">
            地址：北京市石景山区景阳宏昌大厦5楼528室
          </p>
          <div class="fotoffiCode">
            <div class="fotoImg"></div>
          </div>
          <div class="fotmobileCode">
            <div class="fotoImgB"></div>
          </div>
        </div>
      </div>
      <div class="footBotBtom">
        <div class="gotBtnBomdiv">
          © 中国 北京 2019.8
          <a href="http://www.beian.miit.gov.cn" target="_blank"
            >京ICP备19059025号-5</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      footList: [],
    };
  },
  methods: {
    getData() {
      this.$httphelper.get("/api/Lm/GetHomeBottom")
        .then((res) => {
          this.footList = res.data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.footBot {
  width: 100%;
  height: 242px;
  margin-top: 56px;
  .footBotTop {
    width: 100%;
    height: 204px;
    background: #003c80;
    .fotBotTdiv {
      width: 1140px;
      height: 100%;
      margin: 0 auto;
      position: relative;
      .fotBotTdiv_rexian {
        color: #fff;
        font-size: 14px;
        margin-top: 5px;
        position: absolute;
        top: 49%;
        left: 22.8%;
      }
      .fotBotTdiv_rexian2 {
        color: #fff;
        font-size: 14px;
        margin-top: 5px;
        position: absolute;
        top: 59%;
        left: 22.8%;
      }
      .fotBotTdiv_rexian3 {
        color: #fff;
        font-size: 14px;
        margin-top: 5px;
        position: absolute;
        top: 69%;
        left: 22.8%;
      }
      ul {
        width: 708px;
        // height: 81px;
        position: absolute;
        left: 220px;
        top: 40px;
        li {
          float: left;
          width: 25%;
          list-style: none;
          margin-bottom: 6px;
          color: #fff;
          font-size: 24px;
          font-weight: bold;

          p {
            text-align: center;
            a {
              color: #fff;
            }
          }
        }
        // li:hover {
        //   p {
        //     a {
        //       color: #003c80;
        //     }
        //   }
        // }
      }
      .fotoffiCode {
        width: 129px;
        height: 129px;
        position: absolute;
        background: #fff;
        top: 38px;
        right: 12px;
        .fotoImg {
          width: 119px;
          height: 119px;
          position: absolute;
          top: 5px;
          left: 5px;
          background: url("../../static/sc/ewm/ydd.png") no-repeat;
          background-size: cover;
        }
      }
      .fotmobileCode {
        display: none;
        width: 129px;
        height: 129px;
        position: absolute;
        top: 38px;
        right: 188px;
        background: #fff;
        .fotoImgB {
          width: 119px;
          height: 119px;
          position: absolute;
          top: 5px;
          left: 5px;
          background: url("../../static/syimg/xxg_05.png")
            no-repeat;
          background-size: cover;
        }
      }
    }
  }
  .footBotBtom {
    width: 100%;
    height: 38px;
    background: #003c80;
    .gotBtnBomdiv {
      width: 1140px;
      height: 100%;
      margin: 0 auto;
      position: relative;
      font-size: 14px;
      font-family: "SourceHanSansSC-Regular";
      font-weight: 400;
      color: #fff;
      line-height: 38px;
      text-align: center;
      a {
        color: #fff;
        font-size: 14px;
      }
    }
  }
}

@media (max-width: 1460px) and (min-width: 1010px) {
  .fotBotTdiv {
    width: 100% !important;
  }
  .gotBtnBomdiv {
    width: 100% !important;
  }
}
@media screen and (max-width: 1010px) {
  #footBase {
    display: none !important;
  }
}
</style>
